<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>vue作用域插槽</title>
<script src="js/vue.js"></script>
</head>
<body>
<div id="app">
<child>
	<template slot-scope="props"> <!--父组件接收一个子组件传递过来的参数-->
		<li>{{props.item}} | slot-scope接收参数</li>
	</template>
</child>
</div>
<script>
Vue.component('child',{
	data:function(){
		return{
          list:[1,2,3,4] //list数据
			}
	},
	template:`<div>
              <ul>
               <slot v-for="item of list"
                 :item="item"
                 >
               </slot>
              </ul>
              </div>`
});
var app = new Vue({
    el:"#app"
})
</script>
</body>
<!--作用域插槽必须在template中使用-->
<!--
作用域插槽什么时候可以使用,
dom结构由外部传递进来的时候
使用slot + template slot-scope="传递的参数"
-->
</html>